<template>
  <div class="extension_list">
    <div class="extension_list_search">
      <div class="search_box">
        <el-select
          style="width: 115px;"
          v-model="featchData.type"
          placeholder="请选择"
        >
          <el-option
            v-for="item in typeOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
            <span style="float: left">{{ item.label }}</span>
          </el-option>
        </el-select>
      </div>
      <div class="search_box">
        <el-input
          v-model="featchData.businessMember"
          style="width: 180px;"
          placeholder="请输入商务人员"
        ></el-input>
      </div>
      <div class="search_box">
        <el-select
          style="width: 150px;"
          v-model="featchData.settlementStatus"
          placeholder="请选择"
        >
          <el-option
            v-for="item in statusOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
            <span style="float: left">{{ item.label }}</span>
          </el-option>
        </el-select>
      </div>
      <div class="search_box">
        <el-select
          style="width: 200px;"
          v-model="featchData.payType"
          placeholder="请选择"
        >
          <el-option
            v-for="item in programmeOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
            <span style="float: left">{{ item.label }}</span>
          </el-option>
        </el-select>
      </div>
      <!-- <div class="search_box">
        <el-select
          style="width: 185px;"
          v-model="featchData.assistantStatus"
          placeholder="请选择"
        >
          <el-option
            v-for="item in accountOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
            <span style="float: left">{{ item.label }}</span>
          </el-option>
        </el-select>
      </div> -->
      <div class="search_box">
        <el-date-picker
          v-model="featchData.dateTime"
          style="width: 290px;"
          type="daterange"
          clearable
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
      <div class="search_box">
        <el-input
          style="width: 180px;"
          v-model="featchData.query"
          :placeholder="childRoleName+'ID/'+childRoleName+'名称/登录名'"
        ></el-input>
      </div>
      <div class="search_box">
        <el-button class="seach_btn" type="primary" style="height: 36px;" @click="search">搜索</el-button>
        <span @click="resetData()" class="reset_btn">重置</span>
      </div>
      <!-- <div style="margin-bottom: 16px;" v-if="roleType === '1'">
        <el-button style="height: 36px;" @click="createItem" type="primary">
          创建推广员
        </el-button>
      </div> -->
    </div>
    <div class="extension_list_table">
      <page-table-new
        :tableData="tableData"
        :total="total"
        :featchData="featchData"
        :defaultSort="{ prop: 'modifyTime', order: 'descending' }"
        :tableColumns="tableColumns"
        @pageChange="handlePageChange"
        @sortChange="handleSortChange"
      >
      <!-- 推广商ID -->
      <template #id="scope">
        <div>
          <span  @click="previewItem(scope.row)" class="href">{{scope.row.id}}</span>
        </div>
      </template>
      <!-- 类型 -->
      <template #assistanttype="scope">
        <div>
          <span v-if="scope.row.assistanttype === 1">个人</span>
          <span v-if="scope.row.assistanttype === 2">企业</span>
        </div>
      </template>
      <!-- 分成有效期 -->
      <template #lastpayday="scope">
        <div>
          <span>{{ dateFormat(scope.row.lastpayday) }}</span>
        </div>
      </template>
      <!-- 结算状态 -->
      <template #settlementstatus="scope">
        <div>
          <span v-if="scope.row.settlementstatus === 1"><i class="dian success-status"></i> 正常</span>
          <span v-if="scope.row.settlementstatus === 2"><i class="dian warning-status"></i> 冻结</span>
        </div>
      </template>
      <!-- 结算周期 -->
      <template #settlementcycle="scope">
        <div>
          <span v-if="scope.row.settlementcycle === 1">每日</span>
          <span v-if="scope.row.settlementcycle === 2">每周</span>
          <span v-if="scope.row.settlementcycle === 3">每月</span>
        </div>
      </template>
      <!-- 方案类型 -->
      <template #paytype="scope">
        <div>
          <span v-if="scope.row.paytype === 1">固定分成方式</span>
          <span v-if="scope.row.paytype === 2">日期方式</span>
          <span v-if="scope.row.paytype === 3">充值金额方式</span>
          <span v-if="scope.row.paytype === 4">日期与金额混合</span>
        </div>
      </template>
      <!-- 联系方式 -->
      <template #mobile="scope">
        <div>
          <span>{{scope.row.contactman}}</span>
          <span v-if="scope.row.contactman && scope.row.mobile">/</span>
          <span>{{scope.row.mobile}}</span>
        </div>
      </template>
      <!-- 账号状态 -->
      <template #assistantstatus="scope">
        <div>
          <span v-if="scope.row.assistantstatus === 1" class="warning">未实名认证</span>
          <span v-if="scope.row.assistantstatus === 2">实名认证</span>
        </div>
      </template>
      <!-- 注册时间 -->
      <template #createdat="scope">
        <div>
          <span>{{ dateFormat(scope.row.createdat) }}</span>
        </div>
      </template>
      <!-- 操作 -->
      <template #action="scope">
        <div class="action_column">
          <i class="iconfont icon-chakan" title="查看" style="font-size: 18px;" @click="previewItem(scope.row)"></i>
          <i class="iconfont icon-bianji" title="编辑" style="font-size: 18px;" @click="editItem(scope.row)"></i>
        </div>
      </template>
      </page-table-new>
    </div>
  </div>
</template>

<script>
import pageTableNew from "@com/tableNew";
import {
  TABLE_COLUMNS,
  TYPE_OPTIONS,
  STATUS_OPTIONS,
  PROGRAMME_OPTIONS,
  ACCOUNT_STATUS_OPTIONS
} from "../const";
import { getToken,getCookie } from "@/utils/auth";
import { URL_ENV } from "@/utils/request";
import { getDtoListByPage } from "@/api/data";
import { formatDate } from "@/utils/validate";

export default {
  name:'extensionList',
  props: {},
  components: { pageTableNew },
  data() {
    return {
      getToken,
      roleType:getCookie("roleType"),
      typeOptions: TYPE_OPTIONS,
      statusOptions: STATUS_OPTIONS,
      programmeOptions: PROGRAMME_OPTIONS,
      accountOptions: ACCOUNT_STATUS_OPTIONS,
      childRoleName:'',
      featchData: {
        pageSize: 20,
        pageStart: 1,
        type: '', //推广商类型
        businessMember: "", //商务人员
        settlementStatus: '', //结算状态
        payType: '', //方案类型
        assistantStatus: '', //账号状态
        dateTime: [], //时间区间
        query: "", //推广商ID/名称
      },
      baseUrl: URL_ENV[process.env.VUE_APP_CURRENTMODE],
      tableData: [],
      tableColumns: TABLE_COLUMNS,
      total: 0,
      count: "",
      errData: {
        entity: []
      } // 错误信息
    };
  },
  computed: {
    dateFormat(){
      return function(date){
        if(date){
          return formatDate(new Date(date),'yyyy-MM-dd')
        }
      }
    }
  },
  watch: {},
  created() {
    this.childRoleName = this.$store.state.user.childRoleName;
    this.tableColumns.forEach(item=>{
      if(item.key === 'username'){
        item.label = this.childRoleName+'名称';
      }
      if(item.key === 'id'){
        item.label = this.childRoleName+'ID';
      }
    })
    this.search();
  },
  beforeDestroy() {},
  
  methods: {
    // 查看推广商
    previewItem(item) {
      var view = {
        meta:{
          module: "extensionManagedetail",
          parent: "extension",
          title: "推广商",
        },
        fullPath: "/extension/managedetail",
        name: "extensionManagedetail",
        path: "/extension/managedetail"
      }
      this.$store.dispatch('tagsView/delView', view).then(() => {
        this.$router.push({
          path: "/extension/managedetail",
          query: {
            type: "detail",
            id:item.id
          }
        });
      })
    },
    // 编辑代理商
    editItem(item) {
      var view = {
        meta:{
          module: "extensionManagedetail",
          parent: "extension",
          title: "推广商",
        },
        fullPath: "/extension/managedetail",
        name: "extensionManagedetail",
        path: "/extension/managedetail"
      }
      this.$store.dispatch('tagsView/delView', view).then(() => {
        this.$router.push({
          path: "/extension/managedetail",
          query: {
            type: "edit",
            id:item.id
          }
        });
      })
    },
    // 创建代理商/推广员
    // createItem() {
    //   var view = {
    //     meta:{
    //       module: "extensionManagedetail",
    //       parent: "extension",
    //       title: "推广商",
    //     },
    //     fullPath: "/extension/managedetail",
    //     name: "extensionManagedetail",
    //     path: "/extension/managedetail"
    //   }
    //   this.$store.dispatch('tagsView/delView', view).then(() => {
    //     this.$router.push({
    //       path: "/extension/managedetail",
    //       query: {
    //         type: "create"
    //       }
    //     });
    //   })
    // },
    afterLeave() {
      this.count = "";
    },
    setFocus(type, id) {
      setTimeout(() => {
        this.$refs[`${type}_${id}`].focus();
      }, 300);
    },
    search() {
      var data = {
        "page": this.featchData.pageStart,
        "pageSize": this.featchData.pageSize,
        "query": this.featchData.query,
        "type": this.featchData.type,
        "businessMember": this.featchData.businessMember,
        "settlementStatus": this.featchData.settlementStatus,
        "assistantStatus": this.featchData.assistantStatus,
        "startAt": this.featchData.dateTime[0] ? new Date(this.featchData.dateTime[0]).getTime():'',
        "endAt": this.featchData.dateTime[1] ? new Date(this.featchData.dateTime[1]).getTime():'',
        "payType": this.featchData.payType
      }
      getDtoListByPage(data).then(res => {
        if(res.code === 0){
          this.total = res.total;
          this.tableData = res.data.values;
        }else{
          this.$message.error(res.message);
        }

      })
      .catch(error => {
        console.log(error);
      })
    },
    //重新搜索
    resetData() {
      this.featchData = {
        pageSize: 20,
        pageStart: 1,
        type: '', 
        businessMember: "", 
        settlementStatus: '', 
        payType: '', 
        assistantStatus: '', 
        dateTime: [], 
        query: "",
      };
      this.$nextTick(()=>{
        this.search();
      })
    },
    handlePageChange(val) {
      this.featchData = {
        ...this.featchData,
        ...val
      };
      this.search();
    },
    handleSortChange(column) {
      this.featchData = {
        ...this.featchData,
        ...column
      };
      this.search();
    },
  }
};
</script>

<style lang="scss" scoped>
.extension_list {
  .extension_list_search {
    font-size: 0;
    .search_box {
      display: inline-block;
      vertical-align: top;
      margin-right: 6px;
      margin-bottom: 16px;
      .reset_btn {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #777777;
        text-align: justify;
        margin-left: 12px;
        cursor: pointer;
      }
    }
  }
  .extension_list_table {
    background: #ffffff;
    box-shadow: 0 0 6px 0 rgba(0, 21, 41, 0.09);
    border-radius: 4px;
    padding: 16px 16px 0 16px;
    margin: 0 0 16px 0;
    .red_button {
      margin-left: 4px;
    }
    .action_column {
      i {
        color: var(--themeColor);
        margin-right: 10px;
        cursor: pointer;
      }
    }
    .dian{
      display: inline-block;
      width: 6px;
      border-radius: 3px;
      height: 6px;
    }
  }
}
</style>
